<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
>
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet"  href="/css/index_log.css" />
</head>
<style>

    .el-input {
        width: 370px;
    }
</style>
<body>
<div class="login">
    <h2>用户登录</h2>
    <div class="login_box">
        <!-- required就是不能为空  必须在css效果中有很大的作用 -->

        <input type="text" name='name' id='name' required  />
        <label for="name" >用户名</label>
    </div>
    <div class="login_box">

        <input type="password" name='pwd' id='pwd' required="required">
        <label for="pwd">密码</label>
    </div>
    <a href="javascript:void(0)">
        登录
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </a>

</div>
<!--<div id="app">


    <form method="post" action="/doLogin">
    用户名：<input name="username" value="admin"><br>
    密 码：<input name="password" value="123"><br>
&lt;!&ndash;    <span th:text="${publicKey}"></span>&ndash;&gt;
    <button type="submit">登录</button>
    <p th:text="${msg}" style="color: red"></p>
</form>
&lt;!&ndash;<input id="inputText" value="111"/>&ndash;&gt;
&lt;!&ndash;<button onclick='haha()'>普通onclick</button>&ndash;&gt;
&lt;!&ndash;<button id='btn1'>id点击</button>&ndash;&gt;

&lt;!&ndash;
    <el-form style="margin-top: 10%" :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-row style="text-align: center">
            <el-col :span="24">
        <el-form-item label="用户名" prop="username"  style="display: inline-block">
            <el-input  v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
            </el-col></el-row>
        <el-row style="text-align: center">
            <el-col :span="24">
        <el-form-item label="密 码" prop="password" style="display: inline-block">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
            </el-col></el-row>
        <el-row style="text-align: center">
            <el-col :span="24">
        <el-form-item style="display: inline-block">
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>

        </el-form-item>
            </el-col></el-row>
    </el-form>
&ndash;&gt;

</div>-->
</body>

<script th:src="@{/js/vue.js}"></script> <!--vue要放在element ui前面-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript" src="../static/js/jquery-1.8.3.min.js" th:src="@{/js/jquery-1.8.3.min.js}"></script>
<script type="text/javascript">
/*    if (top.location != location){
        alert("过期了")
        top.location.href = location.href;
    }*/
</script>
<script  language='javascript' th:inline="javascript">
    new Vue({
        el: '#app',
        data: function () {/*
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var vaildateName = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入用户名'));
                }
                callback();
            };*/
            return {/*
                msg:[[${msg}]],
                ruleForm: {
                    username:'',
                    password: '',
                },
                rules: {
                    password: [
                        { validator: validatePass, trigger: 'blur' }
                    ],
                    username: [
                        { validator: vaildateName, trigger: 'blur' }
                    ],
                }*/
            }
        },
        created() {
            this.init()
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // alert('submit!');
                        _this =this
                        $.post("/doLogin", _this.ruleForm, function(result) {
                            // 请求处理
                            console.log(result)
                        });
                     /*   axios({
                            url: "/doLogin",
                            data: _this.ruleForm,
                            method: 'post',
                            contentType: "application/json",
                        }).then(res => {
                            console.log(res)
              /!*              var type = res.data.code==20000?'success':'error'
                            this.$message({
                                showClose: true,
                                message: res.data.message,
                                type: type
                            });
                            _this.init()*!/
                        })*/
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            init(){
                if (top.location != location){
                   this.open()
                }
            },
            open() {
                this.$alert('登录过期，请重新登录', {
                    confirmButtonText: '确定',
                    callback: action => {
                        top.location.href = location.href;
                    }
                });
            }
        }
    })
    function haha(){
        alert(document.getElementById("inputText").value)
    }
/*    $('#btn1').click(function () {
        alert('hh')
    })*/
</script>
</html>